/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Animated, FlatList, View, Text, ImageBackground, TouchableOpacity,
} from "react-native";
import FastImage from "react-native-fast-image";
import {
  Color, scale, ScreenWidth, FontSize,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import EnumConstants from "../common/EnumConstants";
import BasePage from "../widget/common/BasePage";
import imgarr from "../imgarr";

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

const { ToubleList } = EnumConstants;

export default class ChooseTrouble extends Component {
  renderItemView = ({ item, index }) => (
    <TouchableOpacity onPress={() => NavigatorUtil.goMaintainDeviceModel(item.service_id)} activeOpacity={0.8}>
      <ImageBackground style={styles.itemContainer}>
        <FastImage source={imgarr[item.service_tag]} style={styles.image} />
        <View style={styles.itemContentContainer}>
          <Text style={styles.textTitle}>{item.service_name}</Text>
          <Text style={styles.textDesc}>{item.service_description}</Text>
        </View>
        <FastImage source={require("../img/ic_arrow_right.png")} style={styles.imageArrow} />
      </ImageBackground>
    </TouchableOpacity>
  );

  render() {
    return (
      <BasePage style={styles.container}>
        <AnimatedFlatList data={ToubleList} renderItem={this.renderItemView} keyExtractor={(_, i) => String(i)} />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white_30,
  },
  itemContainer: {
    flexDirection: "row",
    height: scale * 68,
    marginTop: scale * 16,
    width: ScreenWidth - scale * 32,
    marginLeft: scale * 16,
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    backgroundColor: Color.white,
    alignItems: "center",
    paddingHorizontal: 10 * scale,
  },
  textTitle: {
    color: Color.text_title,
    fontSize: FontSize.SIZE_15,
  },
  textDesc: {
    color: Color.text_desc,
    fontSize: FontSize.SIZE_13,
    marginTop: scale * 5,
  },
  image: {
    width: scale * 48,
    height: scale * 48,
    marginTop: scale * 10,
  },
  imageArrow: {
    width: scale * 20,
    height: scale * 20,
  },
  itemContentContainer: {
    flex: 1,
    paddingHorizontal: 16 * scale,
  },
});
